<template>
	<div class="coach-wrap">
  <div v-title style="display: none">课程信息</div>
		<div class="coach-header">
			<img class="img1" :src="'http://cj.lightway.cc/media/' + this.coachinfo.head_img"/>
			<div class="coach-info">
      	<p>{{ this.coachinfo.name }}</p>
    		<p class="star">
          <stars :grade="this.coachinfo.grade"></stars>
          {{ this.coachinfo.grade + '分' }}
    		</p>
    	</div>
    	<div class="price-info">
    		<p>￥<span>{{ this.coachinfo.price }}</span>/小时</p>
    		<p class="types">
          <span v-for="cars in this.coachinfo.car_type"> {{ cars }}</span>
        </p>
    		<p class="ordernum">已约 <span>{{ this.coachinfo.order_num }}</span> 单</p>
    	</div>
		</div>
		<div class="coach-mark">
			<div class="mark">
				<span>服务态度:<span>{{ this.coachinfo.serve_grade }}</span></span>
				<span>教学质量:<span>{{ this.coachinfo.teaching_grade }}</span></span>
				<span>车容车况:<span>{{ this.coachinfo.car_grade }}</span></span>
			</div>
		</div>

		<div class="contents">
			<div class="title">
				<span class="iconA"></span>
				<span class="span1">基本资料</span>
			</div>
			<div class="panel">
				<ul class="ul-coach">
					<li>年龄: <span>{{ this.coachinfo.age }}</span>岁</li>
					<li>教龄: <span>{{ this.coachinfo.seniority }}</span>年</li>
					<li>车型: 
            <span v-for="cars in this.coachinfo.car_type"> {{ cars }}</span>
          </li>
					<li>车牌号码: <span>{{ this.coachinfo.car_number }}</span></li>
					<li>教授内容:
            <span v-for="item in this.coachinfo.subjects"> {{ item }}</span>
          </li>
				</ul>
			</div>
		</div>

		<div class="contents">
			<div class="title">
				<span class="iconB"></span>
				<span class="span1">教学区域</span>
			</div>
			<div class="panel">
				<ul class="ul-coach">
					<li><span>{{ this.coachinfo.teaching_area }}</span>	<span>{{ this.coachinfo.training_ground }}</span></li>
					<li>{{ this.coachinfo.location }}</li>
				</ul>
			</div>
		</div>
		<div class="schedule-content">
			<div class="title">
				<span class="iconC"></span>
				<span class="span1">课程表</span>
			</div>
			<div class="date-items">
			  <div class="date">
          <span v-for="(item,index) in this.courselist">
            <span v-if="index==0" @click="selectdate(index)">
              <input class="inputd" :id="'date' + index" type="radio" name="date" checked="true" :value="item.date"/>
              <label :for="'date' + index"><p>{{ date(item.date) }}</p><p>{{ week(item.date) }}</p></label>
            </span>
            <span v-else @click="selectdate(index)">
              <input class="inputd" :id="'date' + index" type="radio" name="date" :value="item.date"/>
              <label :for="'date' + index"><p>{{ date(item.date) }}</p><p>{{ week(item.date) }}</p></label>
            </span>
          </span>
			  </div>
			</div>
			<div class="times">
				<div class="noborder" :class="classE" @click="chooseAm">上午</div>
				<div :class="classF" @click="choosePm">下午</div>
			</div>
			<div class="schedule-detail">
				<div class="detail-item" v-for="(item,index) in this.timelist">
					<div class="details">
						<p>{{ time(item.start_time) + '~' + time(item.end_time) }}</p>
            <p class="p-sub" v-if="item.status === false">
              <span v-for="subs in item.subjects">
              <span :class="classC">{{ subs }}</span>
              </span>
            </p>
            <p class="p-sub" v-else>
              <span v-for="subs in item.subjects">
              <span :class="classB">{{ subs }}</span>
              </span>
            </p>
						<p class="p-type">
							 <span v-for="cars in item.car">{{ cars }}</span>
            </p>
					</div>
          <div class="triangle-topright" v-if="(item.status === false) || (item.order >= item.max_people)"></div>
          <div class="square-topright" v-if="(item.status === false) && (item.order !== item.max_people)">不可选</div>
          <div class="square-topright" v-if="(item.order >= item.max_people)">满员</div>
					<div class="orders" v-if="(item.status !== false) && (item.order < item.max_people)">
						<p>￥<span>{{ item.price }}</span>/小时</p>
            <span class="span-class">
              <input class="input-none" :id="item.id" type="checkbox" name="timestrap" :value="time(item.start_time) + '~' + time(item.end_time)">
              <label :for="item.id" class="unselect-icon" @click="sum(item.id)"></label>
            </span>
						<p class="p-num">已预约：<span>{{ item.order }}</span>/<span>{{ item.max_people }}</span></p>
					</div>  
				</div>
			</div> 
		</div>

		<div class="contents">
			<div class="title">
				<span class="iconD"></span>
				<span class="span1">学员点评(<span>{{ this.commentlist.length }}</span>)</span>
				<span class="mores"></span>
			</div>

			<div class="comments-content">
				<div class="comments" v-for="(item,index) in this.commentlist">
					<img class="img1" src="http://img0.imgtn.bdimg.com/it/u=4104068472,66854933&fm=214&gp=0.jpg"/>
					<div class="comments-info">
    				<p>{{ item.student }}</p>
    				<p class="star1">
      				<stars :grade="item.average_grade"></stars>
    				</p>
      		</div>
  				<div :id="index" class="comment" @click="checkAll(index)">
  				   {{ item.comment }}
  				</div>
      		<div class="comment-date">{{ item.add_time }}</div>
				</div>
			</div>
		</div>

    <div class="coach-footer">
      <div class="footer-content">
        <span class="span-sum">已选择<span>{{ times }}</span>个小时</span>
        <span class="span-order" @click="submit">我要预约</span>
      </div>
    </div>
    <notification notification="只能选择其中一个上午或下午的课程！" title="注意" isWithdraw="" v-show="tooltip" v-on:gettooltip="showtooltip"></notification>
    <notification notification="请先选择课程！" title="注意" isWithdraw="" v-show="tooltip2" v-on:gettooltip="showtooltip"></notification>
    <notification notification="预约失败,只能预约六个小时以后的课程！" title="注意" isWithdraw="" v-show="tooltip3" v-on:gettooltip="showtooltip"></notification>
    <notification notification="只能选择连续的时间段！" title="注意" isWithdraw="" v-show="tooltip4" v-on:gettooltip="showtooltip"></notification>
	</div>
</template>
<script type="text/ecmascript-6">
  const ERR_OK = 1;
  import notification from 'components/notification/notification';
  import stars from 'components/stars/stars';
  export default {
    props: {
    },
    data() {
      return {
        classB: 'span-able',
        classC: 'span-unable',
        classE: 'div-select',
        classF: 'div-unselect',
        coachinfo: [],
        courselist: [],
        coursedata: [],
        datelist: [],
        timelist: [],
        commentlist: [],
        times: 0,
        weekArray: [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ],
        hash_str: '',
        tooltip: '',
        tooltip2: '',
        tooltip3: '',
        tooltip4: '',
        flag: 0,
        ordertime: []
      };
    },
    created() {
      let id = this.$route.params.id;
      let mobile = window.localStorage.cphone;
      this.$http.post('api/course/courselist/', { coach_id: id, mobile: mobile, part: 1 }).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.coachinfo = response.coach_date;
        }
      });
      this.$http.post('api/course/courselist/', { coach_id: id, mobile: mobile, part: 2 }).then((response) => {
        response = response.body;
        this.hash_str = response.hash_str;
        if (response.errno === ERR_OK) {
          this.courselist = response.data;
          this.coursedata = response.data;
          this.timelist = this.courselist[0].am;
          this.selectdate(0);
        }
      });
       this.$http.post('api/course/courselist/', { coach_id: id, mobile: mobile, part: 3 }).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.commentlist = response.coach_evaluate;
        }
      });
    },
    methods: {
      sum(value) {
        var index = value.toString();
        let checkbox = document.getElementById(index);
        if (checkbox.checked === true) {
          this.times -= parseInt(this.hour2(checkbox.value)) - parseInt(this.hour1(checkbox.value));
        } else {
          this.times += parseInt(this.hour2(checkbox.value)) - parseInt(this.hour1(checkbox.value));
        }
      },
      showtooltip(msg) {
        this.tooltip = msg.tooltip;
        this.tooltip2 = msg.tooltip;
        this.tooltip3 = msg.tooltip;
        this.tooltip4 = msg.tooltip;
      },
      checkAll(id) {
        var div = document.getElementById(id);
        if (div.className === 'comment') {
          div.setAttribute('class', 'comment-all');
        } else if (div.className === 'comment-all') {
          div.setAttribute('class', 'comment');
        }
      },
      date: function(value) {
        return value.substr(5);
      },
      week: function(value) {
        let weeks = value.split('-');
        let weekday = new Date(weeks[0], parseInt(weeks[1] - 1), weeks[2]);
        return this.weekArray[weekday.getDay()];
      },
      time: function(value) {
        return value.substr(0, 5);
      },
      hour1: function(value) {
        return value.substr(0, 2);
      },
      hour2: function(value) {
        return value.substr(6, 8);
      },
      chooseAm() {
        if (this.checkDate() === true) {
          this.tooltip = 'true';
        } else {
          this.classE = 'div-select';
          this.classF = 'div-unselect';
          this.timelist = this.datelist.am;
        }
      },
      choosePm() {
        if (this.checkDate() === true) {
          this.tooltip = 'true';
        } else {
          this.classF = 'div-select';
          this.classE = 'div-unselect';
          this.timelist = this.datelist.pm;
        }
      },
      selectdate: function(index) {
        var radio = document.getElementsByName('date');
        if (this.checkDate() === true) {
          for (let j = 0; j < radio.length; j++) {
             radio[j].disabled = true;
          }
          this.tooltip = 'true';
        } else {
          for (let j = 0; j < radio.length; j++) {
             radio[j].disabled = false;
          }
          let id = this.$route.params.id;
          this.$http.post('api/course/courselist/', { coach_id: id, part: 2, mobile: window.localStorage.cphone, hash_str: this.hash_str }).then((response) => {
            response = response.body;
            this.hash_str = response.hash_str;
            if (response.errno === ERR_OK) {
              this.courselist = response.data;
              this.timelist = this.courselist[0].am;
              this.selectdate(0);
            }
          });
          this.classE = 'div-select';
          this.classF = 'div-unselect';
          this.datelist = this.courselist[index];
          this.timelist = this.datelist.am;
        }
      },
      checkDate() {
        let checkbox = document.getElementsByName('timestrap');
        for (let i = 0; i < checkbox.length; i++) {
          if (checkbox[i].checked) {
            return true;
          }
        }
      },
      submit() {
        let checkbox = document.getElementsByName('timestrap');
        let radio = document.getElementsByName('date');
        var courseid = '';
        var date = '';
        this.flag = 0;
        for (let i = 0; i < checkbox.length; i++) {
          if (checkbox[i].checked) {
            courseid += checkbox[i].id;
            courseid += ';';
          }
        }
        if (courseid.length === 0) {
          this.tooltip2 = 'true';
        } else {
          for (let j = 0; j < radio.length; j++) {
            if (radio[j].checked) {
              date = radio[j].value;
              break;
            }
          }
          this.$http.post('api/course/checkorder/', {course_id: courseid, coach_id: this.$route.params.id, date: date, mobile: window.localStorage.cphone}).then(response => {
            if (response.body.errno === 0) {
              this.tooltip3 = 'true';
            } else {
              this.ordertime = response.body.data;
              for (let i = 0; i < this.ordertime.length - 1; i++) {
                let j = i + 1;
                if (this.ordertime[i].end_time !== this.ordertime[j].start_time) {
                  this.flag = 1;
                  break;
                }
              }
              if (this.flag === 1) {
                this.tooltip4 = 'true';
              } else {
              this.$router.push({path: '/coachconfirm/', query: {course_id: courseid, coach_id: this.$route.params.id, date: date}});
              }
            }
          });
        }
      }
    },
    components: {
      notification,
      stars
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
    .coach-wrap
      overflow-x hidden
    .ul-coach
      list-style none
      margin-top 10px
      margin-left 38px
      font-family PingFangSC-Light
      li
        list-style none
        font-size 15px
        color $se-fn
        height 23px
        line-height 23px
    .coach-header
      height 86px
      background-color $bg-white
      width 100%
    .img1
      width 67px
      height 69px
      border 1px solid $se-fn
      border-radius 5px
      margin-top 14px
      float left
      margin-left 17px
    .coach-info
      margin-left 15px
      display inline-block
      float left
      margin-top 16px
      font-size 16px
      .star
        margin-top 37px
        margin-left -2px
        font-size 15px
        color $se-fn
    .price-info
      margin-right 17px
      display inline-block
      float right
      text-align right
      margin-top 16px
      font-size 15px
      .types
        font-size 15px
        padding-right 0px
        margin-top 7px
      .ordernum
        font-size 13px
        margin-top 17px
        color rgb(207,206,206)
    .coach-mark
      background-color $bg-white
      width 100%
      height 36px
    .mark
      height 100%
      line-height 36px
      color $se-fn
      font-size 13px
      display flex
      justify-content space-between
      margin-left 17px
      margin-right 17px
    .contents
      width 100%
      background-color $bg-white
      margin-top 10px
      border-1px($border)
      min-height 40px
    .panel
      padding-bottom 10px
    .comments-content
      margin-bottom 55px
      .comments
        min-height 75px
        background-color $bg-white
        border-1px($border)
        img
          width 30px
          height 30px
          border 1px solid $se-fn
          border-radius 5px
          margin-top 10px
          float left
          margin-left 9px
      .comments-info
        margin-left 8px
        display inline-block
        float left
        margin-top 10px
        font-size 13px
        .star1
          margin-top 4px
          margin-left -2px
      .comment
        display: block;
        padding-top: 4px;
        padding-left: 49px;
        width: 250px;
        clear: both;
        font-size: 11px;
        color: #727272;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-tap-highlight-color rgba(0,0,0,0)
      .comment-all
        margin-top 44px
        width 250px
        display inline-block
        margin-left -61px
        font-size 11px
        color $se-fn
        line-height 15px
        -webkit-tap-highlight-color rgba(0,0,0,0)
      .comment-date
        display block
        margin-top 4px
        margin-left 49px
        font-size 11px
        padding-bottom 5px
        color $se-fn


    .title
      height 40px
      width 100%
      line-height 40px
      font-size 16px
      border-1px($border)
      .mores
        display inline-block
        float right
        rectangle-icon(rgb(255,255,255),10px,15px)
        icon-image('right_arrow')
        margin-top 12px
        margin-right 12px
      .iconA
        display inline-block
        float left
        margin-left 20px
        margin-top 13px
        bg-image('info')
        square-icon(rgb(255,255,255),15px)
      .iconB
        display inline-block
        float left
        margin-left 20px
        margin-top 13px
        bg-image('location')
        square-icon(rgb(255,255,255),15px)
      .iconC
        display inline-block
        float left
        margin-left 20px
        margin-top 13px
        bg-image('shedule_icon')
        square-icon(rgb(255,255,255),15px)
      .iconD
        display inline-block
        float left
        margin-left 20px
        margin-top 13px
        bg-image('comments_icon')
        square-icon(rgb(255,255,255),15px)
      .span1
        margin-left 6px
    .schedule-content
      min-height 105px
      width 100%
      background-color $bg-white
      margin-top 10px
      .date-items
        height 40px
        font-size 13px
        color $se-fn
        border-1px($border)
      .date
        margin-left 15px
        margin-right 15px
        display flex
        justify-content space-between
        font-family PingFangSC-Light
        label
          display inline-block
          height 39px
          width 40px
          text-align center
          font-size 12px
          color $se-fn
          line-height 18px
		    .inputd
          display none
          border none
          color $se-fn
        .inputd:checked+label
          border-bottom(2px,$theme)
          color $theme
      .times
        height 30px
        background-color $bg-white
        width 100%
        border-1px($border)
        line-height 30px
        font-size 13px
        display flex
        justify-content space-between
        margin-left 0px
        margin-right 0px
        .div-select
          display inline-block
          border-left 1px solid $border
          width 50%
          text-align center
        .div-unselect
          display inline-block
          border-left 1px solid $border
          width 50%
          text-align center
          background-color $border
          color $bg-white
        .noborder
          border none
      .schedule-detail
        min-height 0px
        background-color $bg-white
        .detail-item
          height 95px
          background-color $bg-white
          border-1px($border)
          .details
            margin-left 27px
            margin-top 9px
            font-size 24px
            display inline-block
            .p-sub
              font-size 13px
              margin-top 5px
              span
                border-radius 5px
                height 19px
                width 50px
                line-height 19px
                text-align center
                display inline-block
                margin-left 5px
              span:nth-child(1)
                margin-left 0px
              .span-able
                border 1px solid $theme
                color $theme
              .span-unable
                border 1px solid $se-fn
                color $se-fn
            .p-type
              font-size 13px
              margin-top 5px
              color $se-fn
              span
                display inline-block
                margin-left 5px
                border 1px solid $se-fn
                border-radius 5px
                height 19px
                width 25px
                line-height 19px
                text-align center
              span:nth-child(1)
                margin-left 0px
          .orders
            float right
            display inline-block
            margin-top 12px
            margin-right 25px
            text-align right
            font-size 13px
            color $theme
            .span-class
              display inline-block
              label
                display inline-block
                -webkit-tap-highlight-color rgba(0,0,0,0)
              .input-none
                display none
              .input-none:checked+label
                display block
                margin-top 14px
                circle-icon-1px($theme,14px)
                bg-image('cm')
                float right
              .unselect-icon
                display block
                margin-top 14px
                circle-icon-1px($bg-white,14px)
                border 1px solid $theme
                border-radius 50%
                float right
            .p-num
              font-size 11px
              color $se-fn
              margin-top 12px
          .triangle-topright
            width 0px
            height 0px
            border-top 45px solid $se-fn
            border-left 45px solid transparent 
            float right
            display inline-block
          .square-topright
            color $bg-white
            font-size 10px
            float right
            display inline-block
            margin-right -45px
            width 38px
            height 38px
            transform rotate(45deg)
            line-height 28px
            text-align center
            font-family PingFangSC-Light
    .coach-footer
      height 47px
      position fixed
      bottom 0px
      width 100%
    .footer-content
      margin-left 0px
      margin-right 0px
      display flex
      justify-content space-between
      span
        display inline-block
        color $bg-white
        line-height 47px
      .span-sum
        background-color rgba(32,32,32,0.8)
        width 64%
        padding-left 15px
      .span-order
        text-align center
        background-color $theme
        width 36%
</style>